<!--
 * @Author: fj
 * @LastEditors: fj
 * @description:
 * @updateInfo: 本次更新内容：
 * @Date: 2023-08-08 17:26:51
 * @LastEditTime: 2023-08-29 10:50:49
-->
<script lang="ts" setup name="ConfigSuccess">
import { useNews } from './useNews'
import { msgApi } from '@/MainApp/apis/msg'

const emits = defineEmits<{
  (e: 'back'): void
}>()
const { newsStore, msgError } = useNews()

const tempForm: Ref<any> = inject('tempForm')!

const router = useRouter()
const channelData: Ref<any> = ref([])

router.afterEach(() => {
  newsStore.setTemplateForm(null)
})

// 取消
const handCancel = () => {
  router.back()
  newsStore.setTemplateForm(tempForm?.value)
}

const handAddTemp = () => {
  emits('back')
}

const handConfigTemp = async () => {
  const { success, data, msg } = await msgApi.getMsgChannelDetail(tempForm?.value.id)
  !success && msgError(msg)
  channelData.value = data?.channelDefinitions || []
}
handConfigTemp()
</script>

<template>
  <div>
    <div class="top">
      <IkSvgIcon
        name="ik-Icon_chenggong"
        class="icon"
        :font-size="72"
        :width="null"
      />
      <p class="success-text">新增成功</p>
      <p v-if="!newsStore.isEnabled" class="error">您还未启用任意一个消息推送渠道，系统无法及时将消息推送给用户</p>
      <el-button type="primary" @click="handAddTemp">继续新增</el-button>
      <el-button @click="handCancel">返回列表</el-button>
      <div class="info-block">
        <el-row>
          <el-col :span="6">模块：</el-col>
          <el-col :span="18">{{ tempForm?.businessName }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">编号：</el-col>
          <el-col :span="18">{{ tempForm?.businessKey }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">标题：</el-col>
          <el-col :span="18">{{ tempForm?.messageTemplateTitle }}</el-col>
        </el-row>
      </div>
      <ul>
        <li v-for="item of channelData" :key="item?.id">
          <span>{{ item?.channelName }}</span>
          <el-tag v-if="!item?.configured" type="info">未配置</el-tag>
          <el-tag v-else :type="item?.status === 'ENABLED' ? 'success' : 'warning'">{{ item?.statusName }}</el-tag>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.top{
  width: 560px;
  margin: 45px auto;
  text-align: center;

  .icon{
    color: #52C41A;
  }

  .success-text{
    font-weight: 650;
    font-style: normal;
    font-size: 20px;
    color: #666;
    margin: 15px 0 ;
  }

  .error{
    color: #FF4D4F;
    margin-bottom: 15px;
  }

  .info-block{
   text-align: left;
   background: #eff3f6;
   margin: 20px 0;
   padding: 20px;
  }
}

:deep(.el-row){
  line-height: 35px;
}

:deep(.el-col-6){
  text-align: right;
}

li{
  list-style: none;
  text-align: left;
  border-bottom: 1px solid #D7D7D7;
  padding:10px 0;
}

.el-tag{
  margin-left: 8px;
}
</style>
